<template>
  <div class="loanBusiness">
    <Tabs :option="tabsOption" @change="tabsChange" />
    <div v-for="(item,index) in tabsOption.column" :key="index">
      <div v-if="changeTabOption.prop === item.prop">
        <avue-crud
          :option="tableOption"
          :data="tableData"
          :page="tablePage"
          @search-change="search"
          @search-reset="searchClear"
          @sizeChange="sizeChangeSearch"
          @currentChange="currentChangeSearch"
        >
          <template slot="menu" slot-scope="scope" style="float: right">
            <el-button
              v-for="(item,index) in tableButtonArray"
              :key="'cc' + index"
              size="small"
              type="text"
              @click="tableButton(item.prop, scope.row)"
            >{{ item.label }}
            </el-button>
          </template>
        </avue-crud>
      </div>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      top="7%"
      width="90%"
    >
      <el-scrollbar style="height: 450px;">
        <SimpleData
          v-if="dialogTableFlag"
          :simple-data="dialogSimpleData"
          :option="dialogSimpleOption"
          :button-self="dialogSimpleButtonArray"
          @selfButton="simpleButton"
        />
        <avue-crud
          v-if="!dialogTableFlag"
          :key="mathRandom"
          style="margin: 10px 0px;"
          :option="dialogTableOptions"
          :data="dialogTableData"
        />
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Axios from 'axios'
import Tabs from '@/components/common/Tabs'
import SimpleData from '@/components/common/SimpleData'
import { queryLoss, saveTransTraffic } from '@/api/bankBiz/loss/loss'

export default {
  name: 'LoanBusiness',
  components: {
    Tabs,
    SimpleData
  },
  data() {
    return {
      namespace: 'Personal',
      nameFlag: 'loanBusiness',
      type: [],
      returnType: [],
      tabsOption: {},
      changeTabOption: {},
      tableOption: {},
      tableButtonArray: [],
      tablePage: {},
      query: {
        'namespace': '',
        'key': ''
      },
      tableTotalData: [],
      tableData: [],
      // 详情相关
      dialogVisible: false,
      dialogTitle: '',
      dialogOption: {},
      dialogTableFlag: false,
      dialogSimpleData: {},
      dialogSimpleOption: {},
      dialogSimpleButtonArray: [],
      dialogTableData: [],
      dialogTableOptions: {},
      mathRandom: ''
    }
  },
  created() {
    this.initOptions()
  },
  mounted() {

  },
  methods: {
    // 初始化配置
    initOptions() {
      this.type = this.$route.meta.type
      // 循环组件，初始化赋值
      for (let i = 0; i < this.type.length; i++) {
        // 1 页签初始化
        if (this.type[i] === 'tabs') {
          const tabsViewOption = personalOptions.tabsViewOption
          this.tabsOption = tabsViewOption[this.nameFlag].tabsOption
          // 默认第一个页签
          this.changeTabOption.prop = this.tabsOption.column[0].prop
          this.returnType = this.tabsOption.column[0].type
          // 初始化第一个页签配置
          for (let j = 0; j < this.tabsOption.column[0].type.length; j++) {
            if (this.tabsOption.column[0].type[j] == 'table') {
              this.tableOption = this.tabsOption.column[0].tableOptions
              this.tablePage = this.tabsOption.column[0].tablePage
              this.tableButtonArray = this.tabsOption.column[0].tableButtonArray
              // 详情相关
              this.dialogOption = this.tabsOption.column[0].detailOptions
              this.dialogSimpleButtonArray = this.tabsOption.column[0].detailOptions.simpleButtonArray
            }
          }
          if (this.tabsOption.column[0].query) {
            this.query.query = Object.assign({}, this.tabsOption.column[0].query)
          }
          this.query.namespace = this.namespace
          this.query.key = this.tabsOption.column[0].prop
        }
      }
      this.commonQueryData()
    },
    // 切换页签
    tabsChange(column) {
      console.log(column)
      let data = []
      for (let i = 0; i < this.tabsOption.column.length; i++) {
        if (this.tabsOption.column[i].prop === column.prop) {
          data = this.tabsOption.column[i]
        }
      }
      this.changeTabOption = data
      this.returnType = data.type
      if (data.query) {
        this.query.query = Object.assign({}, data.query)
      }
      this.query.key = data.prop
      for (let i = 0; i < data.type.length; i++) {
        if (data.type[i] == 'table') {
          this.tableOption = data.tableOptions
          this.tablePage = data.tablePage
          this.tableButtonArray = data.tableButtonArray
          this.tableData = []
          this.tableTotalData = []
          // 详情相关
          this.dialogOption = data.detailOptions
          this.dialogSimpleButtonArray = data.detailOptions.simpleButtonArray
        }
      }
      this.commonQueryData()
    },
    // 搜索按钮事件
    search(params, done) {
      Object.keys(params).forEach(keys => {
        if (params[keys]) {
          this.query.query[keys] = params[keys]
        }
      })
      this.commonQueryData(true)
      if (done) {
        done()
      }
    },
    searchClear() {
      this.query.query.accountNo = ''
    },
    // 调用接口获取数据
    commonQueryData(flag) {
      // 初始化接口入参
      if (this.query.query.customerNo) {
        this.query.query.customerNo = sessionStorage.getItem('customerNo')
      }
      if (this.query.query.accountNo && !flag) {
        this.query.query.accountNo = ''
      }
      // 初始化分页参数
      this.query.query.currentPage = 1
      this.query.query.pageSize = 20
      this.tablePage.currentPage = 1
      this.tablePage.pageSize = 20
      this.tablePage.total = 0
      // 调用公共业务接口
      queryLoss(this.query).then((res) => {
        console.log('response data is: ' + JSON.stringify(res.data))
        if (res.data.code == 200) {
          for (let i = 0; i < this.returnType.length; i++) {
            if (this.returnType[i] == 'table') {
              if (res.data.data.resList == null || res.data.data.resList == undefined) {
                this.tableData = []
                this.tableTotalData = []
                this.tablePage.total = 0
                return
              }
              this.tableData = res.data.data.resList
              this.tableTotalData = res.data.data.resList
              // 理财产品超市、当前持有、当前委托、基金产品超市
              if (this.query.key == 'wealthProductSupermarket') {
                console.log(parseInt(res.data.data.totalNum))
                this.tablePage.total = parseInt(res.data.data.totalNum)
                return
              }
              // 兼容客户端分页
              if (window.Settings.pageType == 'Client') {
                this.tableData = this.tableTotalData.slice((this.tablePage.currentPage - 1) * this.tablePage.pageSize, this.tablePage.currentPage * this.tablePage.pageSize)
                this.tablePage.total = this.tableTotalData.length
              }
            }
          }
          saveTransTraffic(this.query.namespace + '-' + this.query.key, '成功', '')
        } else {
          const errMsg = res.data.message
          window.globalUiKit.notify('提示', errMsg, 'error')
          saveTransTraffic(this.query.namespace + '-' + this.query.key, '失败', errMsg)
          this.tableData = []
          this.tableTotalData = []
          this.tablePage.total = 0
        }
      }).catch((err) => {
        saveTransTraffic(this.query.namespace + '-' + this.query.key, '失败', '')
        this.tableData = []
        this.tableTotalData = []
        this.tablePage.total = 0
        console.log(err)
      })
    },
    // 表格按钮操作
    tableButton(prop, row) {
      console.log('table prop is: ' + prop + ', table row is: ' + JSON.stringify(row))
      this.dialogVisible = true
      this.dialogSimpleOption = {}
      this.dialogTableOptions = {}
      this.dialogTableData = []
      this.mathRandom = Math.random() * 10
      // 查看详情
      if (prop === 'personal-loanRepayment-detail') {
        this.dialogTitle = '贷款详情'
        this.dialogTableFlag = true
        this.dialogSimpleOption = this.dialogOption.simpleOptions
        this.dialogSimpleData = row
      }
      // 还款计划
      else if (prop === 'personal-loanRepayment-plan') {
        this.dialogTitle = '还款计划'
        this.dialogTableFlag = false
        this.dialogTableOptions = this.dialogOption.loanBusinessPlan
        this.repaymentBusiness('loanRepayPlanData', row.loanAccount)
      }
      // 还款记录
      else if (prop === 'personal-loanRepayment-history') {
        this.dialogTitle = '还款记录'
        this.dialogTableFlag = false
        this.dialogTableOptions = this.dialogOption.loanBusinessHistory
        this.repaymentBusiness('loanRepayHistoryData', row.loanAccount)
      }
    },
    // simpleData自定义事件
    simpleButton(prop) {
      console.log('prop is: ' + prop)
    },
    // 还款计划AND还款记录
    repaymentBusiness(prop, accountNo) {
      const params = {
        'namespace': this.namespace,
        'key': prop,
        'query': {
          'accountNo': accountNo
        }
      }
      queryLoss(params).then((res) => {
        console.log('response data is: ' + JSON.stringify(res.data))
        if (res.data.code == 200) {
          this.dialogTableData = res.data.data.resList
        } else {
          this.dialogTableData = []
        }
      }).catch((err) => {
        console.log(err)
        this.dialogTableData = []
      })
    },
    // 切换行数
    sizeChangeSearch(val) {
      this.query.query.currentPage = 1
      this.query.query.pageSize = val
      // 理财产品超市、当前持有、当前委托、基金产品超市
      if (this.query.key == 'wealthProductSupermarket') {
        queryLoss(this.query).then((res) => {
          this.tablePage.total = parseInt(res.data.data.totalNum)
          this.tableData = res.data.data.resList
        }).catch((err) => {
          console.log(err)
        })
        return
      }
      // 兼容客户端分页
      if (window.Settings.pageType == 'Client') {
        this.tablePage.currentPage = 1
        this.tablePage.pageSize = val
        this.tableData = this.tableTotalData.slice((this.tablePage.currentPage - 1) * this.tablePage.pageSize, this.tablePage.currentPage * this.tablePage.pageSize)
        this.tablePage.total = this.tableTotalData.length
        return
      }
    },
    // 切换页码
    currentChangeSearch(val) {
      this.query.query.currentPage = val
      console.log('切换页码')
      // 理财产品超市、当前持有、当前委托、基金产品超市
      if (this.query.key == 'wealthProductSupermarket') {
        queryLoss(this.query).then((res) => {
          this.tablePage.total = parseInt(res.data.data.totalNum)
          this.tableData = res.data.data.resList
        }).catch((err) => {
          console.log(err)
        })
        return
      }
      // 兼容客户端分页
      if (window.Settings.pageType == 'Client') {
        this.tablePage.currentPage = val
        this.tableData = this.tableTotalData.slice((this.tablePage.currentPage - 1) * this.tablePage.pageSize, this.tablePage.currentPage * this.tablePage.pageSize)
        this.tablePage.total = this.tableTotalData.length
        return
      }
    }
  },
  // 当前组件路由守卫
  beforeRouteEnter(to, from, next) {
    next()
  },
  beforeRouteLeave(to, from, next) {
    this.$destroy()
    next()
  }
}
</script>

<style scoped>

  .el-breadcrumb {
    padding: 10px 0 !important;
  }

  .el-button--primary {
    margin-top: 5px !important;
  }
</style>
